<template>
  <div class="home-page-view" ref="homePageRef">
    <div class="up-div"></div>
    <div class="home-content">
      <div class="main-content" :style="{ transform: `scale(${scaleNumber})` }">
        <span class="title">虽然过去不能改变，但未来可以</span>
        <img class="img2" src="@/assets/images/home/k1.png" alt="" />
        <img class="img1" src="@/assets/images/home/k2.png" alt="" />
        <span class="scan">--德武庵</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted } from 'vue';

const homePageRef = ref();
const scaleNumber = ref(1);
const homePageConfig = reactive({
  width: 0,
  height: 0,
});

const updateScall = () => {
  const { width, height } = homePageRef.value.getBoundingClientRect();
  homePageConfig.width = Math.floor(width);
  homePageConfig.height = Math.floor(height);
  scaleNumber.value = Math.min(width / 1400, height / 1000);
};

onMounted(() => {
  updateScall();
  window.addEventListener('resize', updateScall);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateScall);
});
</script>

<style scoped lang="less">
.home-page-view {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #003366;
  overflow: hidden;
  user-select: none;
  .up-div {
    position: absolute;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 34%, 100% 100%, 0 100%, 0 0);
    height: calc(60%);
    top: calc(40%);
    width: 100%;
    box-sizing: border-box;
  }
  .home-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .home-headers {
      display: flex;
      justify-content: space-between;
      height: 100px;
      padding: 20px 40px;
      .header-text {
        font-family: 'my-font';
        font-size: 40px;
        color: #fff;
      }
      .header-btns {
        height: 60px;
        display: flex;
        align-items: center;
      }
    }
    .main-content {
      width: 1200px;
      height: 1000px;
      position: relative;
      span {
        display: inline-block;
        font-family: 'my-font';
        font-size: 80px;
        word-break: break-all;
        position: absolute;
      }
      .title {
        color: #fff;
        width: 800px;
        left: 400px;
        top: 100px;
      }
      .scan {
        color: #003366;
        position: absolute;
        right: 0px;
        bottom: 100px;
      }
      .begin-btn {
        position: absolute;
        top: 470px;
        left: 700px;
      }
      img {
        width: 600px;
        -webkit-user-drag: none;
      }
      .img1 {
        position: absolute;
        top: 90px;
        left: 0;
      }
      .img2 {
        position: absolute;
        top: 105px;
        left: 10px;
        opacity: 0.25;
      }
    }
  }
}
</style>
